<script setup>
import ItemBox from "./components/ItemBox.vue";
import { computed, ref } from "vue";
const boxSize = ref("20");
const handleCommand = (command) => {
  boxSize.value = command;
  gridBoxs.value.forEach((item) => {
    item.status = 0;
  });
  isStart.value = 0;
  isEnd.value = 0;
};

const boxCount = computed(() => {
  return Number(boxSize.value) * Number(boxSize.value);
});
const containerClass = computed(() => {
  if (boxSize.value === "20") return "w20";
  else if (boxSize.value === "10") return "w10";
  else return "w30";
});

const active = ref(0);
const changeActive = (index) => {
  if (active.value === index) {
    active.value = 0;
    return;
  }
  active.value = index;
};
const isStart = ref(0);
const isEnd = ref(0);
const setStartNum = (num) => {
  isStart.value = num;
};
const setEndNum = (num) => {
  isEnd.value = num;
};

const gridBoxs = ref([]);
const setGridBox = (el, index) => {
  gridBoxs.value[index] = el;
};
const createPath = () => {
  if (isStart.value === 0 || isEnd.value === 0) return ElMessage.error("没有设置起点或终点！");
};

document.addEventListener("selectstart", function (e) {
  e.preventDefault();
});
</script>

<template>
  <div :class="['container', containerClass]">
    <div class="item-box" v-for="(item, index) in boxCount" :key="index">
      <ItemBox
        :ref="(el) => setGridBox(el, index)"
        :num="index + 1"
        :boxClass="containerClass"
        :active="active"
        :isStart="isStart"
        :isEnd="isEnd"
        @setStartNum="setStartNum"
        @setEndNum="setEndNum"></ItemBox>
    </div>
  </div>
  <div class="changeSize">
    <span class="text">切换网格大小：</span>
    <el-dropdown @command="handleCommand">
      <el-button type="primary">
        {{ `${boxSize} * ${boxSize}` }}
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="10">10 * 10</el-dropdown-item>
          <el-dropdown-item command="20">20 * 20</el-dropdown-item>
          <el-dropdown-item command="30">30 * 30</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <button :class="['btn', 'set1', active === 1 ? 'active' : '']" @click="changeActive(1)">
    设置起点
  </button>
  <button :class="['btn', 'set2', active === 2 ? 'active' : '']" @click="changeActive(2)">
    设置终点
  </button>
  <button :class="['btn', 'set3', active === 3 ? 'active' : '']" @click="changeActive(3)">
    设置奖励
  </button>
  <button :class="['btn', 'set4', active === 4 ? 'active' : '']" @click="changeActive(4)">
    设置障碍
  </button>
  <button class="start" @click="createPath">生成路线</button>
</template>

<style lang="less" scoped>
.container {
  position: absolute;
  left: 50%;
  display: flex;
  border: 1px solid #000;
  flex-wrap: wrap;
  transform: translateX(-50%);
}
.w10 {
  top: 110px;
  width: 500px;
}

.w20 {
  top: 80px;
  width: 600px;
}

.w30 {
  top: 70px;
  width: 600px;
}

.changeSize {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
}

.btn {
  position: absolute;
  left: 80px;
  padding: 8px 20px;

  &.active {
    background-color: #999;
  }
}

.set1 {
  top: 170px;
  color: #409eff;
}

.set2 {
  top: 270px;
  color: #f56c6c;
}

.set3 {
  top: 370px;
  color: #67c23a;
}

.set4 {
  top: 470px;
}

.start {
  position: absolute;
  top: 330px;
  right: 80px;
  padding: 8px 20px;
}
</style>
